<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级</title>
    <style>
        div.box2{
            color: green;
        }
       
       div.box2{
            color: red ;
        }

        /* #box1{
            color: blue;
        } */

        /* *{
            color: orchid;
        } */

        *{
            color: orchid;
        }
       

      
        /* 
            选择器的优先级
                - 当使用不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，
                    就会发生样式的冲突。
                - 发生样式冲突时，哪个样式生效由选择器的优先级决定
                - 选择器的优先级
                    !important设置的样式优先级最高（慎用）
                    内联样式 1,0,0,0（慎用）
                    id选择器 0,1,0,0
                    类和伪类 0,0,1,0
                    元素选择器 0,0,0,1
                    通配选择器 0,0,0,0
                    继承的样式 没有优先级

                - 比较选择器优先级时，需要将所有的选择器的优先级加到一起，
                    然后再和其他的选择器进行比较，优先级高的优先显示。
                    比如：div.box2 优先级为11
                            .box2 优先级为10
                         div.box2的样式会优先显示  
                         
                    注意点：
                        1.分组选择器优先级都是单独计算的
                        2.优先级的计算不能跨越数量级
                        3.如果两个选择器的优先级一样则优先显示下边的

        
        */

        
    </style>
</head>
<body>

    
    <div id="box1" class="box2">
        我是一个div
        <span>我是div中的span</span>
    </div>
    
</body>
</html>